/* 设置整个页面的基础样式 */
* {
    margin: 0;
    padding: 0;
    /* background-color: rgb(245,245,245); */
}

ul,
ol {
    list-style: none;
}

input {
    outline: none;
}

a {
    text-decoration: none;
    color: black;
}

.center {
    width: 1100px;
    margin: 0 auto;
}

/* 顶部导航条 */
.nav {
    width: 100%;
    background-color:white;
    height: 78px;
}

.nav-top {
    display: flex;
    background-color: white;
    justify-content: space-between;
}

.nav-top .logo {
    display: flex;
}

.nav-top h1 {
    line-height: 74px;
    width: 300px;
}

.nav-top .nav-right {
    display: flex;
}

.nav-top .nav-right .search {
    width: 220px;
    padding-left: 20px;
    height: 30px;
    border-radius: 15px;
    margin-top: 24px;
    border: 1px solid black;
}

.nav-top .nav-right .shop-cart {
    margin-left: 30px;
}

.nav-top .nav-right button {
    height: 30px;
    border: 0;
    margin: 24px 30px;
}

/* 轮播图  */
.lunbo {
    width: 100%;
    background-color: rgb(3, 158, 100);
    height: 480px;
}

.lunbo .box {
    width: 1100px;
    height: 480px;
    position: relative;
}

.lunbo .box .list {
    width: 1100px;
    height: 480px;
    position: relative;
}

.lunbo .box .list li {
    width: 1100px;
    height: 480px;
    position: absolute;
    /* 核心代码 通过改变透明度实现淡入淡出轮播效果，起始所以图片为全透明 */
    opacity: 0;
    transition: all 0.3s linear;
}

.lunbo .box .list li img {
    width: 1100px;
    height: 480px;
}

/* 核心代码 当移动容器下的li添加on属性时，变成显示状态 */
.lunbo .box .list li.on {
    opacity: 1;
}

.lunbo .box .btn {
    display: block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.lunbo .box .prev {
    left: 0;
}

.lunbo .box .next {
    right: 0;
}

.lunbo .box .btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.lunbo .box .page {
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    bottom: 2px;
    text-align: center;
}

.lunbo .box .page li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
    margin: 0 3px;
    cursor: pointer;
}

.lunbo .box .page .on {
    background-color: #0aa1ed;
}

/* 轮播图下的分类区 */
.fenlei {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #aaa;
}

.fenlei .box {
    display: flex;
}

.fenlei .box>div {
    width: 270px;
    display: flex;
    justify-content: center;
}

.fenlei .box>div>div {
    margin-top: 16px;
}

.fenlei .box>div>h5 {
    line-height: 80px;
    padding-left: 8px;
}


/*  商品主体内容 */
/* 主体部分大图区域 */
.main .m-img {
    /* overflow: hidden; */
    display: flex;
}

.main .m-img img {
    display: block;
    margin-top: 40px;
}

.main .m-img .img-left {
    padding-right: 16px;
}

/* <!-- 主体部分编辑推荐区域  --> */
.main .edit {
    margin-top: 50px;
}

.main .edit .box {
    display: flex;
    padding-right: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main .edit .box li {
    width: 268px;
    height: 382px;
    text-align: center;
}

.main .edit .box li a {
    display: block;
}

/* 主体部分数字专辑区域 */
.album {
    overflow: hidden;
}

.album h1 {
    padding-top: 28px;
}

.album p {
    margin-top: 9px;
}

.album a {
    display: block;
    margin-top: 28px;
}


/*数字专辑左侧 */
.main .album .album-left {
    float: left;
}

/* 数字专辑右侧 */
.main .album .album-right {
    float: right;
    position: relative;
    top: 30px;
    right: 50px;
    width: 200px;
    height: 120px;
}

.main .album .album-right .img-s {
    width: 100px;
    height: 100px;
    top: 10px;
    position: absolute;
}

.main .album .album-right .img-b {
    position: absolute;
    z-index: 50;
    left: 60px;
}

/* 主体部分热门商品区域 */
.main .hot {
    margin-top: 50px;
}

.main .hot .box {
    display: flex;
    padding-right: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main .hot .box li {
    width: 268px;
    height: 382px;
    text-align: center;
}

.main .hot .box li a {
    display: block;
}

/*  底部 */
/* 底部导航栏 */

.footer-nav {
    border: 1px solid rgb(211, 211, 211);
    background-color: rgb(242, 242, 242);
}

/*底部导航栏 底部左边 */
.footer {
    margin-top: 20px;
}

/*底部导航栏 底部左边 第一行*/
.footer>div {
    float: left;
}

.footer>div>p {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*底部导航栏 底部右边 */
.footer>ul {
    float: right;
}

.footer>ul {
    display: flex;
    justify-content: space-evenly;
}

.footer>ul li {
    margin: 0;
}

.footer::after {
    content: "";
    display: block;
    clear: both;
}